import React from 'react';
import { message } from 'antd';
import { connect } from 'react-redux';
import * as routerActions from 'react-router-redux';
import Api from 'Utils/api';
import Article from '../../Components/Article';
import { RESOURCE_HOST } from '../../../../constants/config';
import './index.scss';

class WorkReportDetail extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      id: props.params.id,
      title: '',
      createTime: '',
      author: '',
    };

    this.getReport = ::this.getReport;
    this.returnHandle = ::this.returnHandle;
  }
  componentWillMount() {
    this.getReport();
  }
  getReport() {
    const api = new Api({
      method: 'GET',
      path: `/documents/${this.state.id}`,
      success: (json) => {
        this.setState({
          title: json.title || '',
          createTime: json.modify_time,
          cover: json.media || '',
          content: json.content || ''
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  returnHandle() {
    this.props.dispatch(routerActions.goBack());
  }
  render() {
    const { title, createTime, cover, content } = this.state;
    const src = `${RESOURCE_HOST}${cover}`;
    return (
      <div className="work-report-wrap">
        <Article
          title={title}
          createTime={createTime}
          desc={
            <div>
              {
                cover && <img src={src} alt="日常工作详情图片" />
              }
              <p>
                {
                  content ? <span dangerouslySetInnerHTML={{ __html: content.replace(/\n/g, '<br/>') }} /> : ''
                }
              </p>
            </div>
          }
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
  };
}
export default connect(mapStateToProps)(WorkReportDetail);
